<%@ page language="java" contentType="text/html; charset=UTF-8"
	pageEncoding="UTF-8"%>
<%
String path = request.getContextPath();
String basePath = request.getScheme()+"://"+request.getServerName()+":"+request.getServerPort()+path+"/";
%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>角色页面</title>
<link rel="stylesheet" type="text/css"
	href="<%=basePath%>res/wzw/layui/css/layui.css" media="all">
<base href="<%=basePath%>">
<style>
body {
	margin: 10px;
}

.demo-carousel {
	height: 300px;
	line-height: 300px;
	text-align: center;
}
</style>
</head>
<body>
	<div class="demoTable">
		<span style="color: #ddd;">搜索角色名称：</span>
		<div class="layui-inline">
			<input class="layui-input" name="role_name" id="demoReload"
				autocomplete="off">
		</div>
		<button class="layui-btn" data-type="reload">搜索</button>
		<button class="layui-btn" id="ehyRoleAdd" data-type="add">增加</button>
	</div>
	<table class="layui-hide" id="ehyRole" lay-filter="demo"></table>
	<!-- 树型  -->
	<div style="display: inline-block;" pid" name="pid"
		width: 180px; height: 210px; padding: 10px; border: 1px
		solid #ddd; overflow:auto;">
		<ul id="goodsTypeTree"></ul>
	</div>

	<script type="text/html" id="barDemo">
  <a class="layui-btn layui-btn-xs" lay-event="edit" id="typeUpdate">修改</a>
  <a class="layui-btn layui-btn-danger layui-btn-xs" lay-event="del">删除</a>
</script>

	<script src="<%=basePath %>res/wzw/layui/layui.js"></script>
	<script>
layui.config({
  version: '1522709297490' //为了更新 js 缓存，可忽略
});
 
layui.use(['laydate', 'laypage', 'layer', 'table', 'upload', 'element'], function(){
  var laydate = layui.laydate //日期
  ,laypage = layui.laypage //分页
  layer = layui.layer //弹层
  ,table = layui.table //表格
  ,upload = layui.upload //上传
  ,element = layui.element; //元素操作
 
  
  //监听Tab切换
  element.on('tab(demo)', function(data){
    layer.msg('切换了：'+ this.innerHTML);
    console.log(data);
  });
  
  //执行一个 table 实例
  table.render({
     elem: '#ehyRole'
    ,height: 490
    ,url: '<%=basePath %>role/findAll' //数据接口
    ,page: true //开启分页
    ,method:'post'
    ,cols: [[ //表头
       {type:'checkbox', fixed: 'left'}
      ,{field: 'role_name', title: '角色名称', width: 150, align:'center'}
      ,{field: 'role_code', title: '角色编码', width: 150, align:'center'}
      ,{field: 'role_desc', title: '角色描述', width: 150, align:'center'}
      ,{field: 'isva', title: '是否有效', width: 100, align:'center'}
      ,{field: 'optime', title: '操作时间', width: 220, align:'center'}
      ,{field: 'oper', title: '操作人', width: 150, align:'center'}
      ,{fixed: 'right',title: '操作', width: 165, align:'center', toolbar: '#barDemo'}
    ]]
  	,id: 'testReload'
  });
  
  //监听工具条
  table.on('tool(demo)', function(obj){ //注：tool是工具条事件名，test是table原始容器的属性 lay-filter="对应的值"
    var data = obj.data //获得当前行数据
    ,layEvent = obj.event; //获得 lay-event 对应的值
    if(layEvent === 'del'){
      var roleId=data.role_id;
      // alert(roleId);
      layer.confirm('确认删除？', function(index){
        obj.del(); //删除对应行（tr）的DOM结构 
        layer.close(index);
      //使用jquery的ajax方式向后台提交数据
		var url = "<%=basePath%>role/delete";
		//后面的是jsp页面上的 前面的是传出去的
		var data={roleId:roleId};
			$.post(url,data,function(data){
				layer.msg('删除成功', {
					icon: 1,
					time: 1000 //1秒关闭（如果不配置，默认是3秒）
				});


			});
      	});
      
    } else if(layEvent === 'edit'){
    	var roleId=data.role_id;
        //alert(roleId);
        //使用jquery的ajax方式向后台提交数据
		var url = "<%=basePath%>role/findId";
		//后面的是jsp页面上的 前面的是传出去的
		var data_id={roleId:roleId};
		$.post(url,data_id,function(data){
			// alert("修改的数据前查询格式：" + data);

		//将其转换
		//eval("var ehyRoleVo="+data);
		 layer.open({
			  type: 2,
			  area : ['60%' , '90%'],//弹出框大小
			  shift:1,//弹出框动画效果
			  content: ['pages/wzw/ehyRole/ehyRoleUpdate.jsp','on'], //这里content是一个URL，如果你不想让iframe出现滚动条，你还可以content: ['http://sentsin.com', 'no']
		 	  success:function(layero,index){
		 		  var body = layer.getChildFrame('body',index);//确定两个页面之间的父子关系
		 		  var iframeWin = window[layero.find('iframe')[0]['name']];//子页面对象
		 		  console.log(body.html()) //得到iframe页的body内容
		 		  body.find("#roleId").val(data.role_id);
		 		  body.find("#roleName").val(data.role_name);
		 		  body.find("#roleCode").val(data.role_code);
		 		  body.find("#roleDesc").val(data.role_desc);
		 		  body.find("#isva").val(data.isva);
		 		  body.find("#optime").val(data.optime);
		 		  body.find("#oper").val(data.oper);
		 	  }
			}); 
			   
		});
    }else if(layEvent === 'mod'){
    	var roleId=data.role_id;
        //alert(roleId);
        //使用jquery的ajax方式向后台提交数据
		var url = "<%=basePath%>role/findId";
		//后面的是jsp页面上的 前面的是传出去的
		var data={roleId:roleId};
		$.post(url,data,function(data){
		
		//将其转换
		// eval("var ehyRoleVo="+data);
		 layer.open({
			  type: 2,
			  area : ['60%' , '90%'],//弹出框大小
			  shift:1,//弹出框动画效果
			  content: ['pages/wzw/ehyRole/ehyRoleMod.jsp','on'], //这里content是一个URL，如果你不想让iframe出现滚动条，你还可以content: ['http://sentsin.com', 'no']
		 	  success:function(layero,index){
		 		  var body = layer.getChildFrame('body',index);//确定两个页面之间的父子关系
		 		  var iframeWin = window[layero.find('iframe')[0]['name']];//子页面对象
		 		  console.log(body.html()) //得到iframe页的body内容
		 		  body.find("#roleId").val(ehyRoleVo.role_id);
		 		  body.find("#roleName").val(ehyRoleVo.role_name);
		 	  }
			}); 
			   
		});
    }
  });
  //条件查询
  var $ = layui.$;
		  
  $('.demoTable .layui-btn').on('click', function(){
	 var demoReload = $('#demoReload');
	 //执行重载
     table.reload('testReload', {
	 	url: '<%=basePath%>role/findRolesByName',
       page: 1, //重新从第 1 页开始
       where: {
          role_name: demoReload.val()
       }
     });
  });
  $('#ehyRoleAdd').on('click', function(){
	 layer.open({
		  type: 2,
		  area : ['60%' , '90%'],//弹出框大小
		  shift:1,//弹出框动画效果
		  content: ['pages/wzw/ehyRole/ehyRoleAdd.jsp','on'] //这里content是一个URL，如果你不想让iframe出现滚动条，你还可以content: ['http://sentsin.com', 'no']
		});
   });

  
});
</script>
</body>
</html>